<template>
	<div style="padding: 0 .2rem;box-sizing: border-box;">
		<div style="font-size: .4rem;">价格</div>
		<div class="block" style="padding: .2rem;box-sizing: border-box;">
			<p style="color: #EF4F4F;margin-top: .2rem;">{{pricemaxtit}}</p>
			<el-slider class="my-el-slider" v-model="value9" :show-tooltip="false" range :max="maxprice" @change="changeFUN()">
			</el-slider>
			<div style="display: -webkit-flex;display: flex;justify-content: space-between;color: #EF4F4F;"><span class="pricemin">{{pricemin}}</span><span class="pricemax">{{pricemax}}</span></div>
			<div style="width: 100%;padding: .2rem;box-sizing: border-box;text-align: center;border: 1px solid #EF4F4F;color: #EF4F4F;margin-top: .5rem;" @click="gozroe()">
				确定
			</div>
		</div>
	</div>
</template>

<script>
	import { mapGetters, mapActions } from 'vuex'
	import api from '../fetch/api'
	export default {
		name: "price",
		data() {
			return {
				maxnum: this.maxprice,
				pands: 0,
				leiType: true,
				value9: [],
				pricemax:"不限",
				pricemin:"￥0",
				pricemaxtit:"不限",
				
			}
		},
		mounted() {
			this.value9=[0, this.maxprice];
			this.pands = this.maxnum
		},
		computed: {
			...mapGetters([
				'source',
				'minprice',
				'maxprice'
			])
		},
		methods: {
			...mapActions({
				setminprices: 'setminprices',
				setmaxprices: 'setmaxprices',
				setpricemaxtit:'setpricemaxtit',
				setistxtactive:"setistxtactive"
			}),
			//			价格改变
			changeFUN() {
				var that = this;
				that.pricemin="￥" + that.value9[0];
					that.pricemax="￥" + that.value9[1];
				if((that.value9[1] == 500 || that.value9[1] == 3000)&&that.value9[0]==0) {
					that.pricemax="不限";
					that.pricemaxtit="不限";
					return
				}
				if (that.value9[0]>0&&(that.value9[1]==500 || that.value9[1]==3000)) {
					that.pricemaxtit=that.value9[0]+"元以上";
					return
				}
				if((that.value9[1]<500 || that.value9[1]<3000)&&that.value9[0] == 0) {
					that.pricemaxtit=that.value9[1]+"元以下"
					return
				}
				
				if((that.value9[1]<500 || that.value9[1]<3000)&&that.value9[0]>0) {
					that.pricemaxtit=that.value9[0]+"元到"+that.value9[1]+"元之间";
					return
				}
			},
			gozroe() {
				var that = this;
				that.setminprices(that.value9[0]);
				that.setmaxprices(that.value9[1]);
				that.setpricemaxtit(that.pricemaxtit);
				that.setistxtactive(true);
				that.$router.go(-1)
				console.log(1)
			}
		}
	}
</script>
<style>
	.el-slider__bar {
		background-color: #EF4F4F !important;
	}
	
	.el-slider__button {
		border-color: #EF4F4F;
	}
</style>